JavaScript shablon literallari: Tegli shablonlar va matnlarni qayta ishlash

ECMAScript 2015 (ES6) bilan taqdim etilgan JavaScript shablon literallari JavaScript'da matnlar bilan ishlashda inqilob qildi. Ular an'anaviy matnlarni birlashtirishga nisbatan toza va o'qilishi osonroq alternativani taklif qiladi hamda ko'p qatorli matnlar va matn interpolyatsiyasi kabi kuchli xususiyatlarni taqdim etadi. Ammo asoslardan tashqari, tegli shablonlar matnlarni qayta ishlash imkoniyatlarining butunlay yangi darajasini ochib beradi. Ushbu qo'llanma shablon literallarining nozik jihatlarini o'rganadi, tegli shablonlarga chuqur sho'ng'iydi va ularni standart matnlarni qayta ishlash usullari bilan taqqoslaydi.

Shablon literallari nima?

Shablon literallari ichiga ifodalarni joylashtirish imkonini beruvchi matn literallaridir. Ular qo'sh yoki bir tirnoq o'rniga teskari tirnoq (`) belgisi bilan o'raladi. Bu oddiy o'zgarish ko'plab imkoniyatlarni ochib beradi.

Asosiy sintaksis va interpolyatsiya

Shablon literallarining asosiy xususiyati matn interpolyatsiyasidir. Siz JavaScript ifodalarini to'g'ridan-to'g'ri matn ichiga ${ifoda} sintaksisi yordamida joylashtirishingiz mumkin. Ifoda hisoblanadi va uning natijasi matnga aylantirilib, shablon literaliga kiritiladi.

            
const name = 'Alice';
const age = 30;
const salomlashish = `Salom, mening ismim ${name} va men ${age} yoshdaman.`;
console.log(salomlashish); // Natija: Salom, mening ismim Alice va men 30 yoshdaman.

            

              
                Copy
              
            
          

Bu an'anaviy matnlarni birlashtirishga nisbatan ancha toza va o'qilishi osonroq:

            
const name = 'Alice';
const age = 30;
const salomlashish = 'Salom, mening ismim ' + name + ' va men ' + age + ' yoshdaman.';
console.log(salomlashish);

            

              
                Copy
              
            
          

Ko'p qatorli matnlar

Shablon literallari ko'p qatorli matnlarni yaratishni ham soddalashtiradi. Siz shunchaki teskari tirnoqlar ichiga to'g'ridan-to'g'ri qator uzilishlarini qo'shishingiz mumkin, bu esa noqulay \n belgilariga ehtiyoj qoldirmaydi.

            
const kopQatorliMatn = `Bu
ko'p qatorli
matn.`;
console.log(kopQatorliMatn);
/* Natija:
Bu
ko'p qatorli
matn.
*/

            

              
                Copy
              
            
          

Aksincha, an'anaviy matnlarni birlashtirish yordamida ko'p qatorli matnlarni yaratish xatoliklarga olib kelishi mumkin va o'qish uchun qiyin bo'ladi.

Tegli shablonlar: Imkoniyatlarni ochish

Tegli shablonlar haqiqiy o'zgarish yaratuvchidir. Ular shablon literallarini funksiya yordamida qayta ishlashga imkon beradi. Teg - bu shablon literalining qismlari va interpolyatsiya qilingan qiymatlar bilan chaqiriladigan oddiy funksiyadir.

Sintaksis va funksiya tuzilishi

Tegli shablonlar uchun sintaksis juda oddiy. Siz shablon literali oldiga teg funksiyasi nomini qo'yasiz:

            
const name = 'Bob';
const age = 25;
const natija = myTag`Mening ismim ${name} va men ${age} yoshdaman.`;
console.log(natija);

            

              
                Copy
              
            
          

myTag funksiyasi quyidagi argumentlarni qabul qiladi:

• strings: Shablon literalidagi matn literallari massivi.
• ...values: Interpolyatsiya qilingan ifodalarning qiymatlari.

strings massivi interpolyatsiya qilingan qiymatlardan *oldingi*, *orasidagi* va *keyingi* matn qismlarini o'z ichiga oladi. values argumenti - bu barcha interpolyatsiya qilingan qiymatlarni massivga to'playdigan qoldiq parametr (...values).

            
function myTag(strings, ...values) {
  console.log('strings:', strings);
  console.log('values:', values);
  return 'Qayta ishlangan matn';
}

const name = 'Bob';
const age = 25;
const natija = myTag`Mening ismim ${name} va men ${age} yoshdaman.`;
/* Natija:
strings: ["Mening ismim ", " va men ", " yoshdaman.", raw: Array(3)]
values: ["Bob", 25]
*/

            

              
                Copy
              
            
          

E'tibor bering, strings massivida shuningdek raw xususiyati ham mavjud bo'lib, u xom, ekrandan o'tkazilmagan matn literallarini o'z ichiga oladi. Bu escape ketma-ketliklari bilan ishlashda foydalidir.

Maxsus teglarni yaratish: Amaliy misollar

Tegli shablonlarning haqiqiy kuchi ma'lum bir matnni qayta ishlash vazifalari uchun maxsus teglarni aniqlash qobiliyatida yotadi. Quyida bir nechta amaliy misollar keltirilgan:

1. HTML ekrandan o'tkazish (Escaping)

Saytlararo skripting (XSS) hujumlarining oldini olish veb-xavfsizlik uchun juda muhimdir. Tegli shablon interpolyatsiya qilingan qiymatlardagi HTML obyektlarini avtomatik ravishda ekrandan o'tkazishi mumkin.

            
function escapeHTML(strings, ...values) {
  const escapedValues = values.map(value => {
    return String(value)
      .replace(/&/g, '&')
      .replace(//g, '>')
      .replace(/"/g, '"')
      .replace(/'/g, ''');
  });
  let result = strings[0];
  for (let i = 0; i < escapedValues.length; i++) {
    result += escapedValues[i] + strings[i + 1];
  }
  return result;
}

const userInput = '';
const safeHTML = escapeHTML`
Foydalanuvchi kiritgan ma'lumot: ${userInput}
`;
console.log(safeHTML);
// Natija: 
Foydalanuvchi kiritgan ma'lumot: <script>alert("XSS");</script>

            

              
                Copy
              
            
          

2. Mahalliylashtirish (i18n)

Tegli shablonlar til kodiga asoslangan tarjimalarni qidirishning qulay usulini taqdim etish orqali xalqarolashtirishni (i18n) soddalashtirish uchun ishlatilishi mumkin.

            
// Soddalashtirilgan misol (tarjimalar lug'atini talab qiladi)
const translations = {
  en: {
    greeting: 'Hello, {name}!',
    agePrompt: 'You are {age} years old.'
  },
  fr: {
    greeting: 'Bonjour, {name} !',
    agePrompt: 'Vous avez {age} ans.'
  },
  es: {
    greeting: '¡Hola, {name}!',
    agePrompt: 'Tienes {age} años.'
  }
};

let currentLanguage = 'en';

function i18n(strings, ...values) {
  const key = strings.join('{}'); // Soddalashtirilgan kalit yaratish, yaxshilanishi mumkin
  const translation = translations[currentLanguage][key];

  if (!translation) {
    console.warn(`Kalit uchun tarjima topilmadi: ${key}`);
    return strings.reduce((acc, part, i) => acc + part + (values[i] || ''), ''); // Asl matnni qaytarish
  }

  // O'rinbosarlarni qiymatlar bilan almashtirish
  let result = translation;
  values.forEach((value, index) => {
    result = result.replace(`{${index}}`, value);
  });

  return result;
}

const name = 'Carlos';
const age = 35;

console.log(i18n`Hello, {name}! You are {age} years old.`); // Natija (Inglizcha): Hello, Carlos! You are 35 years old.

currentLanguage = 'fr';
console.log(i18n`Hello, {name}! You are {age} years old.`); // Natija (Fransuzcha): Tarjima topilmadi, shuning uchun inglizcha qaytaradi: Hello, Carlos! You are 35 years old. (chunki murakkabroq kalit kerak.)

            

              
                Copy
              
            
          

Eslatma: Bu soddalashtirilgan misol. Haqiqiy hayotdagi holatda siz mustahkamroq tarjima kutubxonasi va kalit yaratish strategiyasidan foydalangan bo'lar edingiz.

3. Uslub berish va formatlash

Tegli shablonlar matnlarga maxsus uslub yoki formatlashni qo'llash uchun ishlatilishi mumkin. Masalan, siz ma'lum so'zlarga avtomatik ravishda qalin formatlashni qo'llaydigan teg yaratishingiz mumkin.

            
function bold(strings, ...values) {
  let result = strings[0];
  for (let i = 0; i < values.length; i++) {
    result += `${values[i]}` + strings[i + 1];
  }
  return result;
}

const item = 'mahsulot';
const price = 99.99;
const formatlanganMatn = bold`Bu ${item} narxi ${price}.`;
console.log(formatlanganMatn); // Natija: Bu mahsulot narxi 99.99.

            

              
                Copy
              
            
          

4. Kiritilgan ma'lumotlarni tekshirish

Tegli shablonlar kiritilgan ma'lumotlarni tekshirish uchun ham ishlatilishi mumkin. Bu, ayniqsa, foydalanuvchi tomonidan taqdim etilgan qiymatlarning ma'lum qoidalarga mos kelishini ta'minlash uchun foydalidir.

            
function validateEmail(strings, ...values) {
  const email = values[0]; // Faqat bitta qiymat: email manzili deb faraz qilinadi
  const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;

  if (!emailRegex.test(email)) {
    return 'Noto\'g\'ri email manzili.';
  }
  return `Yaroqli email: ${email}`;
}

const email1 = 'test@example.com';
const email2 = 'invalid-email';

console.log(validateEmail`Email manzili: ${email1}`); // Natija: Yaroqli email: test@example.com
console.log(validateEmail`Email manzili: ${email2}`); // Natija: Noto'g'ri email manzili.

            

              
                Copy
              
            
          

Tegli shablonlar bilan xavfsizlik masalalari

Tegli shablonlar ko'plab afzalliklarni taklif qilsa-da, potentsial xavfsizlik oqibatlaridan xabardor bo'lish juda muhim, ayniqsa foydalanuvchi kiritgan ma'lumotlar bilan ishlaganda. XSS zaifliklarining oldini olish uchun har doim foydalanuvchi tomonidan taqdim etilgan qiymatlarni tozalang yoki ekrandan o'tkazing. Agar siz uchinchi tomon kutubxonasidan teg ishlatsangiz, uning yaxshi sinovdan o'tgan va ishonchli ekanligiga ishonch hosil qiling.

Matnlarni qayta ishlash usullari: Taqqoslash

Tegli shablonlar matnlarni qayta ishlashning kuchli va moslashuvchan usulini taklif qiladi, ammo ular har doim ham har bir holat uchun eng yaxshi yechim emas. Quyida boshqa keng tarqalgan matnlarni qayta ishlash usullari bilan taqqoslash keltirilgan.

Regular ifodalar

Regular ifodalar matnlarda naqshlarni solishtirish va manipulyatsiya qilish uchun kuchli vositalardir. Ular quyidagi kabi vazifalar uchun juda mos keladi:

• Kiritish formatlarini tekshirish (masalan, email manzillari, telefon raqamlari).
• Matnlardan ma'lum ma'lumotlarni ajratib olish (masalan, hujjatdagi barcha URL manzillarini topish).
• Matnlardagi naqshlarni almashtirish (masalan, barcha HTML teglarini olib tashlash).

Afzalliklari:

• Murakkab naqshlarni solishtirish uchun yuqori samaradorlik.
• Keng qo'llab-quvvatlanadi va yaxshi tushuniladi.

Kamchiliklari:

• O'qish va saqlab turish qiyin bo'lishi mumkin, ayniqsa murakkab naqshlar uchun.
• Ba'zi vazifalar uchun tegli shablonlarga qaraganda kamroq moslashuvchan bo'lishi mumkin.

            
const text = 'Bu matnda ba\'zi URL manzillari mavjud: https://www.example.com va http://another.example.org.';
const urls = text.match(/(https?:\/\/[^\s]+)/g);
console.log(urls); // Natija: [ 'https://www.example.com', 'http://another.example.org' ]

            

              
                Copy
              
            
          

Matn metodlari (substring, slice, replace va hokazo)

JavaScript'ning o'rnatilgan matn metodlari matnlarni manipulyatsiya qilish uchun asosiy vositalar to'plamini taqdim etadi. Ular quyidagi kabi oddiy vazifalar uchun mos keladi:

• Qism matnlarni ajratib olish.
• Belgilarni yoki qism matnlarni almashtirish.
• Matnlarni katta yoki kichik harflarga o'tkazish.

Afzalliklari:

• Asosiy matn operatsiyalari uchun oddiy va ishlatish oson.
• Odatda oddiy vazifalar uchun samarali.

Kamchiliklari:

• Murakkabroq matn manipulyatsiyasi uchun noqulay bo'lib qolishi mumkin.
• Regular ifodalar yoki tegli shablonlarga qaraganda kamroq moslashuvchan.

            
const str = 'Salom, dunyo!';
const qismMatn = str.substring(0, 5); // Birinchi 5 ta belgini ajratib olish
console.log(qismMatn); // Natija: Salom

            

              
                Copy
              
            
          

Tegli shablonlar, regular ifodalar yoki matn metodlarini qachon ishlatish kerak

Qaysi usulni qo'llash tanlovi vazifaning o'ziga xos talablariga bog'liq.

• Tegli shablonlar: HTML ekrandan o'tkazish, mahalliylashtirish, uslub berish va kiritilgan ma'lumotlarni tekshirish kabi maxsus mantiqni talab qiladigan murakkab matnlarni qayta ishlash vazifalari uchun foydalaning. Ular, shuningdek, domenga xos tillarni (DSL) yaratish uchun ham foydalidir.
• Regular ifodalar: Naqshlarni solishtirish, ajratib olish va almashtirish vazifalari uchun foydalaning. Ular, ayniqsa, kiritish formatlarini tekshirish va matnlardan ma'lumotlarni ajratib olish uchun juda mos keladi.
• Matn metodlari: Qism matnlarni ajratib olish, belgilarni almashtirish va harflar registrini o'zgartirish kabi oddiy matn manipulyatsiyasi vazifalari uchun foydalaning.

Ba'zi hollarda, kerakli natijaga erishish uchun turli usullarni birlashtirishingiz kerak bo'lishi mumkin. Masalan, siz HTML obyektlarini ekrandan o'tkazish uchun tegli shablondan foydalanib, so'ngra ekrandan o'tkazilgan matndan ma'lum ma'lumotlarni ajratib olish uchun regular ifodalardan foydalanishingiz mumkin.

Eng yaxshi amaliyotlar va mulohazalar

• Teg funksiyalaringizni kichik va aniq maqsadli qilib saqlang. Teg funksiyasi ideal holda bitta, yaxshi aniqlangan vazifani bajarishi kerak.
• Teg funksiyalaringiz uchun tushunarli nomlardan foydalaning. Bu kodingizni o'qish va tushunishni osonlashtiradi.
• Xatoliklarni to'g'ri boshqaring. Agar teg funksiyangiz xatolikka uchrasa, u mazmunli xato xabarini qaytarishi yoki istisno (exception) yuborishi kerak.
• Ishlash samaradorligini yodda tuting. Teg funksiyalari ishlash samaradorligiga ta'sir qilishi mumkin, ayniqsa ular tez-tez ishlatilsa yoki murakkab operatsiyalarni bajarsa.
• Umumiy teg vazifalari uchun kutubxonadan foydalanishni o'ylab ko'ring. HTML ekrandan o'tkazish, mahalliylashtirish va uslub berish kabi vazifalar uchun oldindan tayyorlangan teg funksiyalarini taqdim etadigan bir nechta kutubxonalar mavjud.
• Xavfsizlik zaifliklarining oldini olish uchun har doim foydalanuvchi kiritgan ma'lumotlarni tozalang. Bu, ayniqsa, foydalanuvchi tomonidan taqdim etilgan qiymatlarni qayta ishlash uchun tegli shablonlardan foydalanganda muhimdir.

Xulosa

JavaScript shablon literallari, ayniqsa tegli shablonlar qo'shilishi bilan, matnlarni manipulyatsiya qilishning kuchli va moslashuvchan usulini taqdim etadi. Tegli shablonlarning afzalliklari va cheklovlarini tushunib, ularni boshqa matnlarni qayta ishlash usullari bilan taqqoslash orqali siz samaraliroq, o'qilishi oson va xavfsizroq kod yozishingiz mumkin. Veb-ilovalarni, buyruqlar satri vositalarini yoki server tomonidagi ilovalarni yaratayotgan bo'lsangiz ham, shablon literallari va tegli shablonlarni o'zlashtirish sizning JavaScript ko'nikmalaringizni sezilarli darajada oshiradi.